<script setup>
import { ref, onMounted } from 'vue';
import { ArrowLeftBold, ArrowRight, ArrowRightBold } from "@element-plus/icons-vue";
import router from "@/router";
const value1 = ref([])
const value2 = ref([])
const value3 = ref([])
const input = ref('')
const options1 = [
  {
    value: '前端',
    label: '前端',
  },
  {
    value: '后端',
    label: '后端',
  },
  {
    value: '算法',
    label: '算法',
  },
  {
    value: '测试',
    label: '测试',
  },
  {
    value: '前后端',
    label: '前后端',
  },
]
const options2 = [
  {
    value: '北京',
    label: '北京',
  },
  {
    value: '上海',
    label: '上海',
  },
  {
    value: '南京',
    label: '南京',
  },
  {
    value: '广州',
    label: '广州',
  },
  {
    value: '深圳',
    label: '深圳',
  },
]
const options3 = [
  {
    value: '在职',
    label: '在职',
  },
  {
    value: '离职',
    label: '离职',
  },
  {
    value: '在校',
    label: '在校',
  },
]
onMounted(() => {

  const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
  if (dataFromPreviousPage.expectjob) {
    const expectJobArray = dataFromPreviousPage.expectjob.split(',');
    value1.value = options1
        .filter(option => expectJobArray.includes(option.value))
        .map(option => option.value);
    console.log(value1.value);
  }
  if (dataFromPreviousPage.expectlocation) {
    const expectLocationArray = dataFromPreviousPage.expectlocation.split(',');
    value2.value = options2
        .filter(option => expectLocationArray.includes(option.value))
        .map(option => option.value);
    console.log(value2.value);
  }
  if (dataFromPreviousPage.employment_status) {
    const employment_StatusArray = dataFromPreviousPage.employment_status.split(',');
    value3.value = options3
        .filter(option => employment_StatusArray.includes(option.value))
        .map(option => option.value);
    console.log(value3.value);
  }
  if (dataFromPreviousPage.expectsalary) {
    input.value = dataFromPreviousPage.expectsalary;
  }

  console.log(dataFromPreviousPage);
});
const last = () => {
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  router.push('/first');
};
const upload = () => {
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  router.push('/upload');
};
const next = () => {
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
  console.log(value1);
  dataFromPreviousPage.expectjob = value1._value.join(',');
  dataFromPreviousPage.expectlocation = value2._value.join(',');
  dataFromPreviousPage.employment_status = value3._value.join(',');
  dataFromPreviousPage.expectsalary = input._value;
  console.log(dataFromPreviousPage)
  localStorage.setItem('dataFromPreviousPage', JSON.stringify(dataFromPreviousPage));
  router.push('/third');
};
</script>

<template>
  <form class="body1" style="background-color: #f9f7f7;background-size: cover;">
    <el-row justify="center">
      <el-col :span="4" style="margin: auto"><el-icon size="128px" color="#3F72AF" @click="last"><ArrowLeftBold /></el-icon></el-col>
      <el-col :span="16" style="justify-content: center;text-align: center;">
        <h1>仅需三步，生成智能简历</h1>
        <div class="card3">
          <el-row :gutter="30" justify="space-around">
            <el-col :span="8" >
              <div style="background-color: #f9f7f7;width: 150px;height: 30px;border-radius: 10px;margin-top: 50px;margin-left: 100px;margin-right: 50px "></div>
            </el-col>
            <el-col :span="8" >
              <div style="background-color: #3F72AF;width: 150px;height: 30px;border-radius: 10px;margin-top: 50px;margin-left: 50px;margin-right: 10px "></div>
            </el-col>
            <el-col :span="8" >
              <div style="background-color: #f9f7f7;width: 150px;height: 30px;border-radius: 10px;margin-top: 50px;margin-left: 10px;margin-right: 50px "></div>
            </el-col>
          </el-row>
          <el-row>
            <h2 style="margin-top: 50px;margin-left: auto;margin-right: 5px;">求职意向</h2>
            <el-select
                v-model="value1"
                multiple
                placeholder="意向岗位"
                style="max-width: 400px;margin-top: 50px;margin-left: 0;margin-right: auto;width: 400px"
                size="large"
                class="select"
            >
              <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-row>
          <el-row>
            <h2 style="margin-top: 50px;margin-left: auto;margin-right: 5px;">意向城市</h2>
            <el-select
                v-model="value2"
                multiple
                placeholder="意向城市"
                style="max-width: 400px;margin-top: 50px;margin-left: 0;margin-right: auto;width: 400px"
                size="large"
                class="select"
            >
              <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-row>
          <el-row>
            <h2 style="margin-top: 50px;margin-left: auto;margin-right: 5px;">期望薪资</h2>
            <el-input v-model="input" style="width: 400px;height:42px;margin-top: 50px;margin-left: 0;margin-right: auto;"
                      placeholder="期望薪资" />
          </el-row>
          <el-row>
            <h2 style="margin-top: 50px;margin-left: auto;margin-right: 5px;">在职情况</h2>
            <el-select
                v-model="value3"
                multiple
                placeholder="在职情况"
                style="max-width: 400px;margin-top: 50px;margin-left: 0;margin-right: auto;width: 400px"
                size="large"
                class="select"
            >
              <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-row>
        </div>
      </el-col>
      <el-col :span="4" style="margin: auto"><el-icon size="128px" color="#3F72AF" @click="next"><ArrowRightBold /></el-icon></el-col>
    </el-row>
  </form>
  <button ref="labelIWantToHire" class="change" style="color: #3F72AF;font-weight: bold;font-size:12px;
  z-index: 99;position: absolute; top: 63%; right: 120px; transform: translateY(50%);background-color: #f9f7f7;box-shadow: 5px 5px 5px 2px #444444;"
          @click="upload"
  >
    已有简历？直接上传！</button>
</template>

<style scoped>
@import "../../assets/css/global.css";
.select:deep(.el-select__wrapper){
  background-color: #f9f7f7;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px;
  outline: #3F72AF 1px solid;
}
.input-with-select1:deep(.el-input__wrapper) {
  background-color: #f9f7f7;/*覆盖原背景颜色，设置成透明 */
  border-radius: 0 10px 10px 0;
  outline: #3F72AF 1px solid;
}
:deep(.el-input-group__prepend) {
  background-color: #f9f7f7;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px 0  0 10px;
  outline: #3F72AF 1px solid;
}
:deep(.el-input__wrapper){
  background-color: #f9f7f7;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px;
  outline: #3F72AF 1px solid;
}
.button-group {
  display: flex;
  gap: 100px; /* 按钮之间的间隔 */
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  justify-content: center;
}

button {
  padding: 10px 40px;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 15px;
}

/* 活动状态按钮样式 */
.active {
  background-color: #3F72AF; /* 蓝色背景 */
  color: #f9f7f7; /* 白色文字 */
}

/* 非活动状态按钮样式 */
.inactive {
  background-color: #f9f7f7; /* 白色背景 */
  color: #3F72AF; /* 蓝色文字 */
}
.high_year{
  font-size: 24px;
  font-weight: bold;
  color: black;
  background-color: rgba(52,124,175,0.11);
}
.year{
  font-size: 22px;
  color: #444444;
}
.low_year{
  font-size: 16px;
  color: #888888;
}
</style>d